<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
body{
    background-image:url(QQ图片20170628160920.jpg);
    background-size:cover;
}
    input{
        width: 450px;
        height: 41px;
    }
    button{
        width: 45px;
        height: 45px;
        background-image:url(QQ图片20170628170900.png);
    }
    span{
        color: yellow;
    }
p{
        display: flex;
        align-items: center;
        position: absolute;
        top:120;
        left:170;

}


    </style>
</head>
<body>
<div class="guide">
    <span class="item firat-item">图片</span>
    <tr>3</tr>
    <span class="item">词典</span>
    <tr>3</tr>
    <span class="item">视频</span>
    <tr>3</tr>
    <span class="item">学术</span>
    <tr>3</tr>
    <span class="item">更多...</span>
    <tr>5</tr>
    <span class="item">1</span>
    <tr>3</tr>
    <span class="item">office online</span>
    <tr>3</tr>
    <span class="item">outlook.com</span>
    <tr>3</tr>
</div>
<p>
    <img src="QQ图片20170628170839.png">
    <input type="text">
    <button type="QQ图片20170628170900.png"></button>
</p>

</body>
</html>